import React from 'react';
import './userlist.css'
import { useState, useEffect } from "react";
import axios from 'axios'
import { Pagination } from 'antd';
export default function App() {
    let [users, setusers] = useState()
    let [user, setuser] = useState([])
    let offset = 0
    let p =20
    useEffect(() => {
        axios.get('https://elm.cangdu.org/v1/users/count').then(res => {
            if (res.data.status == 1) {
                setusers(res.data.count)
            }
        })
        onChange(offset)
    }, []);
    function onChange(offset){
        axios.get(`https://elm.cangdu.org/v1/users/list?offset=${offset*20}&limit=20`).then(res => {
            setuser(res.data)
        })
    }
    return <div className='main'>
        <div>
            <div>
                <tr>
                    <th colSpan="1" rowSpan="1" className="el-table_1_column_1">
                        <div className="cell">#</div>
                    </th>
                    <th colSpan="1" rowSpan="1" className="el-table_1_column_2">
                        <div className="cell">注册日期</div>
                    </th>
                    <th colSpan="1" rowSpan="1" className="el-table_1_column_3">
                        <div className="cell">用户姓名</div>
                    </th>
                    <th colSpan="1" rowSpan="1" className="el-table_1_column_4">
                        <div className="cell">注册地址</div>
                    </th>
                </tr>
            </div>
            <div>
                {user.map((i,index) => {
                    return <tr className="el-table__row" key={index}>
                        <td className="el-table_1_column_1">
                            <div className="cell">
                                <div>{index + 1}</div>
                            </div>
                        </td>
                        <td className="el-table_1_column_2">
                            <div className="cell">{i.registe_time}</div>
                        </td>
                        <td className="el-table_1_column_3">
                            <div className="cell">{i.username}</div>
                        </td>
                        <td className="el-table_1_column_4">
                            <div className="cell">{i.city}</div>
                        </td>
                    </tr>
                })}

            </div>
        </div>
        <div><span className='span'> 共{users}条 </span> <Pagination defaultCurrent={6} total={users} showSizeChanger={false} onChange={onChange}  /></div>
    </div>
}